import React, { Component,Fragment} from 'react'
import { View,Button,OpenData,Image,Text} from '@tarojs/components';
import Taro from "@tarojs/taro"
import { NavbarInfo } from '@/utils/navBarinfo';
import { AtIcon} from "taro-ui"
import { AtNoticebar } from 'taro-ui'
import {AtListItem } from "taro-ui"
import '@/utils/request';
import './index.less'

interface state{
  userInfo:{[Key:string]:any}
  hasUserInfo:Boolean
  canIUseGetUserProfile:Boolean
  navbarinfo:{[Key:string]:any},
}

export default class Me extends Component {
  constructor(props){
    super(props);
 }
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res);
        this.setState({
          userInfo: res.userInfo,
          hasUserInfo: true

        })
      }
    })
  }
  state:state={
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
    navbarinfo:{}
  }
  getUserInfo=(e)=>{
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    this.setState({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }

  componentWillMount () {
    if (wx.getUserProfile) {
        this.setState({
          canIUseGetUserProfile: true
        })
    }

    NavbarInfo().then(res=>{
        this.setState({
          navbarinfo:res
        })
        console.log(res)
    })
  }

  render () {
    const data = this.state;
    return (
      <Fragment>
      <View className="fixedHead" style={{paddingTop:data.navbarinfo.statusBarHeight+10}}>『科技·改变生活』</View>
      <View className='me'>
        <View className="headblock" style={{paddingTop:data.navbarinfo.navbarHieght}}>
            <View className="login" style={{top:data.navbarinfo.area&&data.navbarinfo.area.top,height:data.navbarinfo.area&&data.navbarinfo.area.height-2,width:data.navbarinfo.area&&data.navbarinfo.area.width}}><AtIcon className="icon" value="user" size="20"></AtIcon>去认证</View>
            <View className="avatar">
                 <OpenData type='userAvatarUrl'/>
                 {/* <Image className="rounded-full" style={{width:"100%",height:"100%"}} src={data.userInfo.avatarUrl}/> */}
            </View>
            <View className="userName"><OpenData type='userNickName'/></View>
        </View>
          <View className="notic">
          <AtNoticebar showMore icon='volume-plus'>
            这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏
          </AtNoticebar>
          </View>
                {/* 授权 */}
                {/* {
                   !data.hasUserInfo?(data.canIUseGetUserProfile?
                   <Button type='primary' size="mini" onClick={this.getUserProfile.bind(this)}>获取头像昵称1</Button>
                   :
                   <Button open-type="getUserInfo" bindgetuserinfo={this.getUserInfo}>获取头像昵称2</Button>)
                   :
                   <View className="max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4 p-2">
                    <View className="flex-shrink-0 m-2">
                          <View className="h-12 w-12">
                              <Image className="rounded-full" style={{width:"100%",height:"100%"}} src={data.userInfo.avatarUrl}/>
                          </View>
                    </View>
                    <View>
                          <View className="text-xl font-medium text-black">{data.userInfo.nickName}</View>
                          <Text className="text-gray-500">{data.userInfo.country}</Text>
                    </View>
                 </View>
                } */}
                    
                      <View className="card">
 
                        <AtListItem  iconInfo={{ size: 25, color: '#78A4FA', value: 'calendar', }} title='标题文字1' arrow='right' />
                        <AtListItem  iconInfo={{ size: 25, color: '#78A4FA', value: 'calendar', }} title='标题文字2' arrow='right' />
                        <AtListItem  iconInfo={{ size: 25, color: '#78A4FA', value: 'calendar', }} title='标题文字3' arrow='right' />
                        <AtListItem  iconInfo={{ size: 25, color: '#78A4FA', value: 'calendar', }} title='标题文字4' arrow='right' />
                        
                      </View>
                
      </View>
     </Fragment>
    )
  }
}
